<template>
  <li>
    <label>
      <!-- (1) 想用用户的选择来决定选项框的状态
               这个用户的选择->变量(todo.done)，
               选项框的状态->checked
               把这两者绑定在一起就行了
           为什么一定要用个变量保存用户的选择？
           因为 用户有没有选中 在别处还有用处
      -->
      <input type="checkbox" 
             :checked="todo.done" 
             @change="handleCheck(todo.id)"
             />
      <span>{{  todo.title }}</span>
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
  </li>
</template>

<script>

  export default {
     name:'MyItem',
     props:['todo'],
     methods: {
        /**
         * (2) 其实也可以使用 v-model双向绑定直接 v-model="todo.done"
         *     这样还可以直接去掉 :checked="todo.done" 因为使用v-model
         *     本来就可以初始化 选项框，初始值就是done的初始值
         * 
         *     但是不推荐使用，依照严格的eslint检查，会直接报错
         *     因为它违背了原则：父组件传过来的数据是不能修改的，不能改回去
         * */ 
        handleCheck(id){
          //  this.checkTodo(id)
          this.$bus.$emit('checkTodo',id)
        },
        handleDelete(id){
          //  this.deleteTodo(id)
          this.$bus.$emit('deleteTodo',id)
        }
     },
  }
</script>

<style>
      /*item*/
    li {
      list-style: none;
      height: 36px;
      line-height: 36px;
      padding: 0 5px;
      border-bottom: 1px solid #ddd;
    }
    li label {
      float: left;
      cursor: pointer;
    }
    li label li input {
      vertical-align: middle;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }
    li button {
      float: right;
      display: none;
      margin-top: 3px;
    }
    li:before {
      content: initial;
    }
    li:last-child {
      border-bottom: none;
    }
    li:hover{
      background: #ddd;
    }
    li:hover button{
      display: block;
    }
</style>